<template>
  <div class="exam-page">
    <section class="empty0-section">
      <div>
        <div class="time">
          <span>{{time}}s</span>
        </div>
        <p class="time-tip"></p>
        <p class="tip" v-if="show_words">{{tips}}</p>
        <p class='tip' v-else>
          <img src="@/assets/home/speaker@2x.png" class=""/>
          <audio ref="wordaudio" :src="wordaudioUrl"></audio>
        </p>
        <div>
         <ul id="example-2">
           <li v-for="(item, index1) in words" class="word_li" @click="upwords(index1)">
             <div>{{ item }}</div>
           </li>
         </ul>
        </div>
        <a-button
          type="primary"
          class="live-btn"
          shape="round"
          @click="upwords(5)"
          >不认识
        </a-button>
      </div>
      <audio ref="audio1" :src="clickaudioUrl"></audio>
    </section>
  </div>
</template>
<script>
  import Footer from "@/components/layout/Footer";
  import { mapState } from "vuex";
  import { getExamwords,getlistenWords } from "@/services";
  const qs = require("querystring");

  export default {
    name: "exam",
    components: {
      Footer
    },
    data() {
      return {
        show_words:true,
        tips:'education',
        shopError:'',
        timer:'',
        timer2:'',
        time: 15,
        level:0,
        detail_level:0,
        nowlevel_time:'',
        answer_persent:'',
        lavel_err:5,
        anwser_time:'',
        total:'',//总单词数
        score:0,//得分
        listenscore:0,//得分
        right_num:0,//正确数量
        err_num:0,//累计错误数量
        level_err_num:0,//当前关卡错误数量
        max_err:10,//累计错误
        right_option:0,//正确选项
        examwords:[],
        word_data:[],
        words: ['目的地','小心点','教育','位置','眼睛'],
        listen_word_num:0,
        listenwords:[],
        result_id:'',
        word_con:[],//出现的单词
        can_next:1,
        clickaudioUrl: 'https://yxpmaterial.yixuepai100.com/exam/click.mp3', // 声音源
        wordaudioUrl:'',
        now_type:1,//1 单词  2  读音
        can_click:true
      };
    },
    computed: {
      ...mapState({
        userInfo: state => state.userInfo
      })
    },
    watch: {},
    methods: {
      async getwords(){
        this.$loading.show()
        let params = {
         type:0
        }
         let data = await getExamwords(params)
           this.$loading.hide();
         if (data.code === 1) {
           this.examwords = data.data.list
           this.max_err = data.data.max_err;
           this.level = 0;
           this.word_data = this.examwords[this.level];
           this.nowlevel_time = this.word_data.levle_time;
           this.anwser_time = this.word_data.anwser_time;
           this.answer_persent = this.word_data.answer_persent;
           this.lavel_err = this.word_data.lavel_err;
           this.total = this.word_data.total;
           this.words = this.word_data.question[this.detail_level].options;
           this.tips =this.word_data.question[this.detail_level].subject;
           this.right_option =this.word_data.question[this.detail_level].right_option;
           this.word_con.push(this.tips);
           this.starttime()
         }else{
          this.$Toast(data.info);
         }
      },
      //下一组单词
      async gonext(){
        clearInterval(this.timer)
        clearInterval(this.timer2)
        this.time = 15;
        this.level_err_num++;
        this.err_num++;
        this.can_click = true;
        if(this.level_err_num >= this.lavel_err || this.err_num >= this.max_err){
          //提交计算
            this.getlistenWords();
            return false;
        }
        this.detail_level++;
        if(this.detail_level < this.word_data.question.length){
         this.words = this.word_data.question[this.detail_level].options;
         this.tips = this.word_data.question[this.detail_level].subject;
         this.word_con.push(this.tips);
        }else{
          this.level++;
          this.level_err_num = 0;
          if(this.level >= this.examwords.length){
            //提交计算
            this.getlistenWords()
            return false;
          }else{
            this.detail_level = 0;
            this.word_data = this.examwords[this.level];
            this.nowlevel_time = this.word_data.levle_time;
            this.anwser_time = this.word_data.anwser_time;
            this.answer_persent = this.word_data.answer_persent;
            this.lavel_err = this.word_data.lavel_err;
            this.total = this.word_data.total;
            this.words = this.word_data.question[this.detail_level].options;
            this.tips = this.word_data.question[this.detail_level].subject;
            this.right_option =this.word_data.question[this.detail_level].right_option;
            this.word_con.push(this.tips);
            this.starttime();
          }
        }
      },
      //自动获取听力下一个
      async golistennext(){
        clearInterval(this.timer2)
        clearInterval(this.timer)
        this.listen_word_num++;
        this.can_click = true;
        if(this.listen_word_num >= this.listenwords.length){
          //提交显示报告
          this.getReport();
        }else{
          this.time = 15;
          this.listen_word_num++;
          this.words = this.listenwords[this.listen_word_num].options;
          this.right_option =this.listenwords[this.listen_word_num].right_option;
          let audio = this.$refs.wordaudio
          audio.src = this.listenwords[this.listen_word_num].audio;
          audio.play()
          this.startlistentime();
        }
      },
      //选择后调到下一个单词
      async getnewwords(){
        clearInterval(this.timer);
        clearInterval(this.timer2);
        this.$nextTick(function(){
           this.time = 15;
           this.detail_level++;
           this.can_click = true;
           if(this.detail_level < this.word_data.question.length){
            this.words = this.word_data.question[this.detail_level].options;
            this.tips = this.word_data.question[this.detail_level].subject;
            this.word_con.push(this.tips);
            this.right_option =this.word_data.question[this.detail_level].right_option;
           }else{
             this.level++;
             this.level_err_num = 0;
             if(this.level >= this.examwords.length){
               //提交计算
               this.getlistenWords()
             }else{
               this.detail_level = 0;
               this.word_data = this.examwords[this.level];
               this.nowlevel_time = this.word_data.levle_time;
               this.anwser_time = this.word_data.anwser_time;
               this.answer_persent = this.word_data.answer_persent;
               this.lavel_err = this.word_data.lavel_err;
               this.total = this.word_data.total;
               this.words = this.word_data.question[this.detail_level].options;
               this.tips = this.word_data.question[this.detail_level].subject;
               this.right_option =this.word_data.question[this.detail_level].right_option;
               this.word_con.push(this.tips);
             }
           }
           this.starttime();
        })
      },
      //获取下一个听力单词
      async getnewlistenwords(){
        clearInterval(this.timer2)
        clearInterval(this.timer)
        this.$nextTick(function(){
           this.listen_word_num++;
           this.can_click = true;
           if(this.listen_word_num < this.listenwords.length){
            this.words = this.listenwords[this.listen_word_num].options;
            this.right_option =this.listenwords[this.listen_word_num].right_option;
            let audio = this.$refs.wordaudio
            audio.src = this.listenwords[this.listen_word_num].audio;
            audio.play()
            this.time = 15;
           }else{
             this.getReport();
           }
           this.startlistentime();
         })
      },
      //获取听力单词
      async getlistenWords(){
        this.can_next = 0;
        this.show_words = false;
        this.$loading.show()
        let params = {
         type:1,
         words:this.word_con.join(','),
         score:this.score
        }
         let data = await getlistenWords(params)
           this.$loading.hide();
           if (data.code === 1) {
            this.listenwords = data.data.question;
            this.listen_word_num = 0;//记录听力单词数量
            this.words = this.listenwords[this.listen_word_num].options;
            this.result_id = data.data.id;
            this.right_option = this.listenwords[this.listen_word_num].right_option;
            this.can_next = 1;
            this.time = 15;
            this.now_type = 2;
            let audio = this.$refs.wordaudio
            audio.src = this.listenwords[this.listen_word_num].audio;
            audio.play()
            this.startlistentime();
           }else{
            this.$Toast(data.info);
           }
      },
      //点击单词
      async upwords(index){
        let _this = this;
        if(_this.can_click){
          _this.can_click = false;
          setTimeout(function(){
            if(_this.now_type == 1){
              if(index == _this.right_option){
                if(_this.time <= _this.anwser_time){
                  _this.score = Number(_this.score)+(_this.answer_persent)*Number(_this.total)/Number(_this.word_data.question.length);
                }else{
                  _this.score = Number(_this.score)+Number(_this.total)/Number(_this.word_data.question.length);
                }
              }else{
                _this.level_err_num++;
                _this.err_num++;
                if(_this.level_err_num >= _this.lavel_err || _this.err_num >= _this.max_err){
                  //提交计算
                    _this.getlistenWords()
                }
              }
              _this.$refs.audio1.play()
              _this.getnewwords();
            }else{
              if(index == _this.right_option){
                _this.listenscore++;
              }
              _this.$refs.audio1.play()
              if(_this.listen_word_num == _this.listenwords.length - 1){
                _this.getReport()
              }else{
                _this.getnewlistenwords();
              }
            }
          },500);
        }
      },
      //提交听力单词  获取报告
      async getReport(){
        clearInterval(this.timer2)
        this.$router.push({
          path:'/examReport',
          query: {
            id: this.result_id,
            score:this.listenscore
          }
        });
      },
      starttime(){
        this.timer = setInterval(() => {
          this.time--
          if (this.time <= 0) {
            //倒计时结束  跳转下一单词
            this.time = 15;
            if(this.can_next){
              this.gonext();
            }
          }
        }, 1000)
      },
      startlistentime(){
        this.timer2 = setInterval(() => {
          this.time--
          if (this.time <= 0) {
            //倒计时结束  跳转下一单词
            this.time = 15;
            if(this.can_next){
              this.golistennext();
            }
          }
        }, 1000)
      }
    },
    created() {
      this.getwords()
    },
    mounted() {},
    beforeCreate() {},
    beforeMount() {},
    beforeUpdate() {},
    updated() {},
    beforeDestroy() {}
  };
  </script>
<style lang="less" scoped>
/* @import url(); 引入公共css类 */
.exam-page{
  min-height: calc(100vh - 70px);
  width: 100%;
  padding-top: 30px;
  background:#ffffff url(../../assets/yxp-bg.png) center / 100% 100% no-repeat;
  .empty0-section{
    margin: 0 auto;
    text-align: center;
    background: #FFFFFF;
    width: 50%;
    height: 770px;
    margin-left: 25%;
    border-radius: 10px;
    .time{
      width: 50px;
      height: 50px;
      border: 1px solid #27BFA3;
      border-radius: 50%;
      line-height: 50px;
      float: right;
      margin-top:40px;
      margin-right: 40px;
      span{
        font-size: 22px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #27BFA3;
      }
    }
    .time-tip{
      font-size: 22px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #27BFA3;
      padding-top: 126px;
    }
    .tip{
      font-size: 50px;
      font-family: PingFang SC;
      font-weight: 600;
      color: #27BFA3;
      margin-top: 23px;
      margin-bottom: 23px;
    }
    .tip img{
      width: 115px;
      cursor: pointer;
    }
    ul{
      padding-left: 0px;
    }
    .word_li{
      margin-bottom: 35px;
      line-height: 70px;
      list-style: none;
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      width: 12.5rem;
      margin: 0 auto;
      cursor: pointer;
      border-bottom: 1px solid #EEEEEE;
    }
    .live-btn{
      width: 216px;
      height: 54px;
      border:2px solid #F9A821;
      background-color: #ffffff;
      border-radius: 27px;
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #F9A821;
    }

    .color_red{
      color: red;
    }
  }
 }
</style>
